<script setup lang="ts">
import { useRoute } from 'vue-router'
import { reactive, ref } from 'vue'
import type { ScenicDetail } from '@/utils/dataType/ScenicModel.ts'
import { fetchScenicDetail } from '@/services/api/scenic.ts'
import SingleComment from '@/components/comment/SingleComment.vue'
import { ElMessage } from 'element-plus'
import router from '@/router'

const route = useRoute()

const scenicId = route.params.scenicId
const scenic = ref<ScenicDetail>({})

async function getScenicDetail() {
  try {
    scenic.value = null
    const res = await fetchScenicDetail({ scenicId })
    if (res.data != null) {
      scenic.value = res.data
    }
  } catch (error) {
    console.error('获取详细景点信息失败:', error)
  }
  // scenic.value = null
  // const res = await fetchScenicDetail({ scenicId })
  // if (res.data.code == 1) {
  //   if (res.data.data != null) {
  //     scenic.value = res.data.data
  //   } else {
  //     ElMessage.error('出错了')
  //     scenic.value = null
  //   }
  // } else {
  //   ElMessage.error('出错了:' + res.data.msg)
  // }
}

getScenicDetail()
</script>

<template>
  <div id="scenic-detail-show" class="scenic-container" v-if="scenic != null">
    <!-- 上方区域：左图，右信息 -->
    <el-row :gutter="20" class="top-section">
      <el-col :span="12">
        <el-carousel
          :interval="5000"
          arrow="hover"
          height="400px"
          direction="vertical"
          v-if="scenic.scenicPics && scenic.scenicPics.length >= 1"
        >
          <el-carousel-item v-for="(img, index) in scenic.scenicPics" :key="index">
            <img :src="img" class="carousel-img" />
          </el-carousel-item>
        </el-carousel>
        <el-carousel v-else :interval="5000" arrow="hover" height="400px" direction="vertical">
          <el-carousel-item>
            <img src="@/assets/path1.jpg" class="carousel-img" />
          </el-carousel-item>
        </el-carousel>
      </el-col>
      <el-col :span="12">
        <div class="scenic-summary">
          <h2 class="scenic-title">{{ scenic.scenicName }}</h2>
          <div class="rating">⭐ {{ scenic.rating }} / 5 （{{ scenic.commentNumbers }}条点评）</div>
          <div>
            <span v-for="(tag, index) in scenic.tags" :key="index">{{ tag }}</span>
          </div>
          <p>地址：{{ scenic.city || '暂无地址信息' }}</p>
          <p>开放时间:{{ scenic.openTime || '暂无开放时间' }}</p>
          <p>价钱:{{ scenic.price || '暂无价格' }}</p>
          <p>人气：{{ scenic.popularity || '暂无人气值' }}</p>
        </div>
      </el-col>
    </el-row>

    <!-- 下方区域：详情信息 -->
    <el-row :gutter="20" class="bottom-section" style="margin-top: 24px">
      <el-col :md="17" :xs="24">
        <div class="scenic-detail" style="width: 95%">
          <h3>景点介绍</h3>
          <p v-if="scenic.introduce && scenic.introduce != null && scenic.introduce.length != 0">
            {{ scenic.introduce }}
          </p>
          <p v-else>暂无介绍</p>
        </div>
        <div class="scenic-comments" style="width: 95%">
          <h3>用户点评</h3>
          <div v-if="scenic.comments != null && scenic.comments.length != 0">
            <div v-for="(comment, index) in scenic.comments" :key="index" class="comment-item">
              <div class="comment-header">
                <el-avatar :src="comment.avatar" size="small" />
                <span class="comment-username">{{ comment.userName }}</span>
              </div>
              <div class="comment-body">
                <p class="comment-content">{{ comment.content }}</p>
                <p class="comment-date">{{ comment.commentDate }}</p>
              </div>
            </div>
          </div>
          <div v-else>
            <el-empty description="暂无点评"></el-empty>
          </div>
        </div>
      </el-col>
      <el-col :md="6" :offset="0.5" :xs="24">
        <div class="scenic-info-card" style="width: 95%" v-loading="true">
          <h3>相关推荐</h3>
        </div>
      </el-col>
    </el-row>
  </div>
  <div v-else>
    <el-empty description="暂无此景点"></el-empty>
  </div>
</template>

<style scoped>
.scenic-container {
  padding: 24px;
  background: inherit;
  border-radius: 12px;
}

/* 保证每一行高度一致：父 row 设置 min-height，子 col 内部容器设置 100% 高度 */
.top-section {
  background-color: #fff;
  min-height: 400px;
  align-items: stretch; /* 让子项自动拉齐高度 */
}

.bottom-section {
  background-color: inherit;
  min-height: 400px;
  align-items: stretch; /* 让子项自动拉齐高度 */
}

/* 保证 col 内容充满整个 row 高度 */
/*
.el-col > div {
  height: 100%;
}
*/

.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 8px;
}

.scenic-summary {
  padding: 20px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  text-align: left;
}

.scenic-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
}

.scenic-title::before {
  content: '📍';
  margin-right: 8px;
}

.rating {
  font-size: 16px;
  margin-bottom: 10px;
  color: #f59e0b;
  display: flex;
  align-items: center;
}

.rating::before {
  content: '⭐';
  margin-right: 6px;
}

.scenic-summary span {
  display: inline-block;
  background-color: #e0f2f1;
  color: #00796b;
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  margin-right: 6px;
  margin-bottom: 6px;
}

.scenic-summary p {
  font-size: 14px;
  margin: 6px 0;
  display: flex;
  align-items: center;
}

.scenic-summary p::before {
  margin-right: 6px;
  font-size: 16px;
}

.scenic-summary p:nth-of-type(1)::before {
  content: '📍';
}

/* 地址 */
.scenic-summary p:nth-of-type(2)::before {
  content: '⏰';
}

/* 开放时间 */
.scenic-summary p:nth-of-type(3)::before {
  content: '💰';
}

/* 价钱 */
.scenic-summary p:nth-of-type(4)::before {
  content: '🔥';
}

/* 人气 */

/*景点详情*/
.scenic-detail {
  width: 95%;
  padding: 20px;
  text-align: left;
  background-color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.scenic-detail h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.scenic-detail h3::before {
  content: '📖';
  margin-right: 8px;
}

.scenic-detail p {
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
  white-space: pre-wrap; /* 保留换行 */
}

/*评论区*/
.scenic-comments {
  padding: 20px 20px;
  text-align: left;
  background-color: #fff;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: #333;
  margin-top: 20px;
  width: 100%;
}

.scenic-comments h3 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.comment-item {
  display: flex;
  margin-bottom: 16px;
}

.comment-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
  margin-right: 12px;
}

.comment-username {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
  text-align: center;
  word-break: break-all;
}

.comment-body {
  flex: 1;
}

.comment-content {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  word-break: break-word;
}

.comment-date {
  font-size: 12px;
  color: #999;
  margin-top: 6px;
}

.scenic-info-card {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 2;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
</style>
